<template>
  <div>
    <div class="header_wrap">
      <div class="header">
        <div class="logo">
          <a href="#">
            <img src="@/assets/logo.png" />
          </a>
        </div>
        <div class="nav">
          <ul>
            <li v-for="(item, index) in data.headerList" :key="index">
              <a href="#" :class="data.homeIndex == index?'current':''" @click="homeChange(index)">{{ item }}</a>
            </li>
          </ul>
        </div>
        <div class="login-btns">
          <a href="#" class="l-btn" data-toggle="modal">登录</a
          ><a href="#" class="r-btn" @click="register">注册</a>
        </div>
        <div class="phone-icon" style="margin: 25px 10px">
          <a href="#" style="display: none"
            ><img src="//static.lllnet.cn/gclc-gzdk/images/phone-icon1.svg"
          /></a>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const data = reactive({
  headerList: [
    "首页",
    "通知公告",
    "政策咨询",
    "课程商城",
    "学习帮助",
    "意见反馈",
    "关于我们",
  ],
  homeIndex:0
});
const homeChange= (index: number) =>{
    data.homeIndex = index
    let url = ""
    if(index == 0){
        url = "/"
    }
    if(index == 6){
        url = "/about"
    }
    router.push(url);
}
// 进入注册
const register = () =>{
    router.push('/Register');
}
</script>

<style lang="scss" scoped>
.header_wrap {
  width: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 999;
  backdrop-filter: blur(10px);
  .header {
    width: 1200px;
    margin: 0 auto;
    height: 88px;
    overflow: hidden;
    .logo {
      float: left;
      margin: 17px 0 0 0;
      img {
        width: 246px;
        height: 50px;
      }
    }
    .nav {
      float: left;
      margin: 15px 0 0 0;
      ul {
        overflow: hidden;
        li {
          float: left;
          a {
            height: 36px;
            line-height: 36px;
            display: inline-block;
            font-size: 18px;
            color: #333;
            margin-left: 30px;
          }
          .current {
            border-bottom: 3px solid #006dff;
            font-weight: bold;
            color: #006dff;
          }
          a:hover {
            color: #006dff;
          }
        }
      }
    }
    .login-btns {
      float: right;
      height: 36px;
      margin: 25px 0 0 0;
      .l-btn {
        width: 70px;
        text-align: center;
        height: 36px;
        line-height: 36px;
        background-color: #006dff;
        border-radius: 50px;
        color: #fff;
        display: inline-block;
        margin-right: 5px;
        float: left;
      }
      .r-btn {
        width: 70px;
        text-align: center;
        height: 36px;
        line-height: 36px;
        background-color: #e5f0ff;
        border-radius: 50px;
        color: #006dff;
        display: inline-block;
        float: left;
      }
    }
  }
}
</style>
